<template>
  <div class="charts">
    <div id="myChart" style="width: 100%;height:600px;"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
let myChart = {}
export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    myStyle: {
      type: Object,
      required: false
    }
  },
  created () {
    this.$nextTick(() => {
      myChart = document.getElementById('myChart')
      if (this.myStyle) {
        myChart.style.width = this.style.width + 'px'
        myChart.style.height = this.style.height + 'px'
      }
      this.init(myChart)
    })
  },
  methods: {
    init () {
      let mainChart = echarts.init(myChart)
      mainChart.setOption(this.data)
    }
  },
  watch: {
    data: {
      handler () {
        this.init()
      },
      deep: true
    }
  }
}
</script>
<style>
</style>
